LangChain provides a powerful prebuilt user interface that work seamlessly with agents created using [`create_agent()`](/oss/langchain/agents). This UI is designed to provide rich, interactive experiences for your agents with minimal setup, whether you're running locally or in a deployed context (such as [LangGraph Platform](/langgraph-platform/)).

## Agent Chat UI

[Agent Chat UI](https://github.com/langchain-ai/agent-chat-ui) is a Next.js application that provides a conversational interface for interacting with any LangChain agent. It supports real-time chat, tool visualization, and advanced features like time-travel debugging and state forking.

Agent Chat UI is open source and can be adapted to your application needs.

<Frame>
<iframe
  className="w-full aspect-video rounded-xl"
  src="https://www.youtube.com/embed/lInrwVnZ83o?si=Uw66mPtCERJm0EjU"
  title="Agent Chat UI"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowFullScreen
/>
</Frame>

### Features

<Accordion title="Tool visualization">
Studio automatically renders tool calls and results in an intuitive interface.
<Frame>
![Tool visualization in Studio](/oss/images/studio_tools.gif)
</Frame>
</Accordion>

<Accordion title="Time-travel debugging">
Navigate through conversation history and fork from any point
<Frame>
![Time-travel debugging in Studio](/oss/images/studio_fork.gif)
</Frame>
</Accordion>

<Accordion title="State inspection">
View and modify agent state at any point during execution
<Frame>
![State inspection in Studio](/oss/images/studio_state.gif)
</Frame>
</Accordion>

<Accordion title="Human-in-the-loop">
Built-in support for reviewing and responding to agent requests
<Frame>
![Human-in-the-Loop in Studio](/oss/images/studio_hitl.gif)
</Frame>
</Accordion>

<Tip>
You can use generative UI in the Agent Chat UI. For more information, see [Implement generative user interfaces with LangGraph](/langgraph-platform/generative-ui-react).
</Tip>


### Quick start

The fastest way to get started is using the hosted version:

1. **Visit [Agent Chat UI](https://agentchat.vercel.app)**
2. **Connect your agent** by entering your deployment URL or local server address
3. **Start chatting** - the UI will automatically detect and render tool calls and interrupts

### Local development

For customization or local development, you can run Agent Chat UI locally:

<CodeGroup>
```bash Use npx
# Create a new Agent Chat UI project
npx create-agent-chat-app my-chat-ui
cd my-chat-ui

# Install dependencies and start
pnpm install
pnpm dev
```
```bash Clone repository
# Clone the repository
git clone https://github.com/langchain-ai/agent-chat-ui.git
cd agent-chat-ui

# Install dependencies and start
pnpm install
pnpm dev
```
</CodeGroup>

